<script lang="tsx">
/**
 * 图片
 */
export default {
  name: "yy-image"
}
</script>

<script lang="tsx" setup>
import {computed, Ref, ref, watch} from "vue"
import NoData from "../no-data/index.vue"

/**
 * 定义props
 */
const props = withDefaults(defineProps<{
  data: string,
  segment?: string,
  width?: number,
  height?: number,
  zoomRate?: number,
  maxScale?: number,
  minScale?: number,
  fit?: '' | 'fill' | 'contain' | 'cover' | 'none' | 'scale-down',
  /**
   * 是否使用rem
   */
  isRem?: boolean
}>(), {
  segment: ",",
  width: 100,
  height: 100,
  zoomRate: 1.2,
  maxScale: 7,
  minScale: 0.2,
  fit: "cover",
  isRem: true
})

/**
 * 图片数据
 */
const imgList: Ref<string[]> = ref([])

/**
 * 初始化数据
 */
const initImgList = (data: string) => {
  imgList.value = data.split(",")
}

/**
 * 计算样式
 */
const style = computed(() => {
  if (props.isRem) {
    return {
      width: props.width + "rem",
      height: props.height + "rem"
    }
  } else {
    return {
      width: props.width + "px",
      height: props.height + "px"
    }
  }
})

/**
 * 监视
 */
watch(() => props.data, (newValue) => {
  if (newValue) {
    initImgList(newValue)
  }
}, {
  immediate: true
})
</script>

<template>
  <div class="yy-image-form">
    <div v-if="imgList.length > 0" class="list">
      <div v-for="(item,index) in imgList" :key="index" class="item">
        <el-image
            :fit="fit"
            :initial-index="index"
            :max-scale="maxScale"
            :min-scale="minScale"
            :preview-src-list="imgList"
            :src="item"
            :style="style"
            :zoom-rate="zoomRate"
            append-body
            preview-teleported
            show-progress
        />
      </div>
    </div>
    <div v-else :style="style" class="no-data">
      <no-data/>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.no-data {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>